<template>
   <!-- 搜索历史栏 -->
    <div class="history">
      <div class="history-title">
        <span>搜索历史</span>
      </div>
      <div class="history-body">
        <van-tag
          @click="$emit('tagClick',{keyword:item})"
          class="tag"
          v-for="item in historyKeywordList"
          :key="item"
          type="warning">
          {{item}}
        </van-tag>
      </div>
      <div class="history-foot" @click="cleanHistory ">
        <van-icon name="delete-o" /><span>清空搜索历史</span>
      </div>
    </div>
</template>

<script>
  export default {
    props: ['historyKeywordList'],
    methods:{
      async cleanHistory(){
        const res = await this.$api.cleanHistory()
        if(res.errno === 0){
          this.$toast.success('清除成功');
        }
      }
    }
  }
</script>

<style scoped>
  /* 历史栏 */
  .history{
    padding: .05rem .1rem;
  }

  .history-title{
    margin: .1rem 0;
    font-size: .14rem;
  }

  .history-body{
    display: flex;
    flex-wrap: wrap;
  }
  .tag{
    background: rgb(238, 234, 234);
    padding: .05rem;
    color: black;
    margin: .05rem;
  }
  .history-foot{
    text-align: center;
    padding: .2rem;
    font-size: .13rem;
    color: rgb(145, 141, 141);
  }
</style>